import React, { Component } from 'react'
import style from "./unpay.module.scss"
import {request} from "../../../request/request"
import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
const img =require("../image/back.png")
const location  = require("../image/location.png").default
export default class unpay extends Component {
    state={
        flag:true,
        list:[],
        time:null,
        address:JSON.parse(localStorage.getItem("address"))
    }
    componentDidMount(){
        request({
            url:"getorder",
            method:"GET",
            params:{
                oid:"f1679dd0-e448-11eb-b6ae-3dc0554f2a18"
            }
        }).then(res=>{
            console.log(res);
            let _res = res.data
            if(_res.code==="01"){
                this.setState({
                    flag:false,
                    list:_res.data
                })
                this.getdate()
            }
        })
    }
    timer=null
    getdate=()=>{
        var json_date = new Date(this.state.list[0].buildtime).toJSON();
        var time=new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        let end = new Date(time).getTime()+24*60*60*1000
        var now =new Date().getTime()
        var result=Math.floor(end-now)/1000; 
        this.timer=setInterval(sub,1000); //定时器 调度对象
        let that = this
        function sub(){
            if (result>1) {
                result = result - 1;
                var second = Math.floor(result % 60);     // 计算秒 ，取余
                var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
                var hour = Math.floor(result/60/60%24);  //计算小时，这里最长只有30min，用不着
                //var day = Math.floor(result/1000/60/60/24);   //计算天，这里最长只有30min，用不着
                that.setState({
                    time:(hour<10?"0"+hour:hour)+"时"+(minite<10?"0"+minite:minite)+"分"+(second<10?"0"+second:second) + "秒"
                }) 
            } else{
                //这里可以添加倒计时结束后需要执行的事件
                that.setState({
                    time:"未在规定时间内支付，订单已失效！"
                }) 
                clearInterval(that.timer);  
                //TODO 订单失效后的一些列操作：更改订单状态的同时回库存
            }
        }; 
    }
    componentWillUnmount(){
        clearInterval(this.timer);  
    }
    //继续支付
    loadingToast=()=>{
        Toast.loading('Loading...', 1, () => {
          request({
            url:"/updateOrder",
            method:"POST",
            oid:"f1679dd0-e448-11eb-b6ae-3dc0554f2a18"
          }).then(res=>{
              console.log(res);
          })
        });
    }
    render() {
        let n=0
        let allMoney=0
        this.state.list.forEach(item=>{
            n+=item.count
            allMoney+=item.price*item.count
        })
        let userList = JSON.parse(localStorage.getItem("userList"))
        let {head_url,nickname,signature,stuAuth} = userList
        return (
           this.state.flag?<>
                <div className={style.top}>
                    <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                    <div>
                        <Skeleton.Avatar active={true} style={{width:"275px",height:"16px"}} shape="default" />
                        <br></br>
                        <Skeleton.Avatar active={true} style={{width:"275px",height:"16px"}} shape="default" />
                    </div>
                </div>
                <div className={style.center}>
                    <Skeleton.Avatar active={true} style={{width:"40px",height:"40px",borderRadius:"50%",marginRight:"10px"}} shape="default" />
                    <Skeleton.Avatar active={true} style={{width:"220px",height:"40px",borderRadius:"5px",marginRight:"10px"}} shape="default" />
                    <Skeleton.Avatar active={true} style={{width:"60px",height:"40px",borderRadius:"5px",marginRight:"10px"}} shape="default" />
                </div>
                <div className={style.img}>
                    <Skeleton.Image style={{width:"100px",height:"100px"}} />
                    <div className={style["img-right"]}>
                    <Skeleton.Button active={true} style={{width:"230px",borderRadius:"5px",marginBottom:"10px"}} size="small"  shape="default"  />
                    <Skeleton.Button active={true} style={{width:"230px",borderRadius:"5px",marginBottom:"10px"}} size="small"  shape="default"  />
                    <Skeleton.Button active={true} style={{width:"230px",borderRadius:"5px",marginBottom:"10px"}} size="small"  shape="default"  />
                    </div>
                </div>
                <div className={style.footer}>
                    <div>
                    <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"250px",height:"40px"}} shape="default" />
                    </div>
                    <div>
                    <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"250px",height:"40px"}} shape="default" />
                    </div>
                    <div>
                    <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"250px",height:"40px"}} shape="default" />
                    </div>
                    <div>
                    <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"250px",height:"40px"}} shape="default" />
                    </div>
                </div>
                <div className={style.bottom}>
                <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                <Skeleton.Avatar active={true} style={{width:"50px",height:"40px"}} shape="default" />
                </div>
                
           </>:
            <div className={style.unpay}>
                <div className={style.head}>
                    <img src={img.default} onClick={()=>this.props.history.push("/mebuy")}></img>
                    <div className={style.pay}>
                        <p>等待买家付款</p>
                        <p>{this.state.time}</p>
                    </div>
                </div>
                <div className={style["address-active"]}>
                    <img src={location}></img>
                    <div className={style["address-center"]}>
                        <div className={style["address-top"]}>
                                <span className={style["address-name"]}>{this.state.address.name}</span>
                                <span className={style["address-ipone"]}>{this.state.address.ipone}</span>
                        </div>
                        <div className={style["address-bottom"]}>
                            <span className={style["address-detailed"]}>{this.state.address.city+" "+this.state.address.detailed}</span>
                        </div>
                    </div>
                </div>
                <div className={style.order}>
                        <div className={style.user}>
                            <img src={"/apis/"+head_url}></img>
                            <div className={style["user-msg"]}>
                                <p className={style.nickname}>{nickname}</p>
                                <p className={style.signature}>{signature}</p>
                            </div>
                        </div>
                        {
                            this.state.list.map((item,i)=>{
                                return (
                                    <div key={i} className={style["order-list"]}>
                                        <img src={"/apis/"+item.cover}></img>
                                        <div className={style["order-message"]}>
                                            <h3>{item.name}</h3>
                                            <div className={style["list-text"]}>
                                                <span className={style.grade}>{item.description}成新</span>
                                                <span className={style.getSelf}>{item.getSelf?"支持自提":null}</span>
                                            </div>
                                            <div className={style["list-money"]}>
                                                <div>
                                                    <span className={style.price}>￥{item.price}</span>
                                                </div>
                                                <span className={style.num}>X{item.count}</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <div className={style.distribution}>
                            <span className={style.type}>配送方式</span>
                            <div>
                                <span className={style["distribution-zi"]}>支持自提</span>
                                <span className={style["distribution-qian"]}>￥0.00</span>
                            </div>
                        </div>
                        <div className={style.xiaoji}>
                        <Button onClick={this.loadingToast} className={style.jixu}>继续支付</Button>
                            {/* <span className={style.jixu} onClick={this.jixu}>继续支付</span> */}
                            共{n}件商品：小计￥{allMoney}
                        </div>
                    </div>
            </div>
        )
    }
}
